<template>
  <div>
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header class="header">
        <MyHeader></MyHeader>
      </el-header>
      <el-container style="overflow: auto">
        <el-aside class="aside" width="280px">
          <Aside></Aside>
        </el-aside>
        <el-main class="main">
          <MyPagetabs></MyPagetabs>
          <router-view> </router-view
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/MyAside.vue";
import MyHeader from "@/components/MyHeader.vue";
import MyPagetabs from "@/components/MyPagetabs.vue";
export default {
  name: "home",
  data() {
    return {};
  },
  components: {
    Aside,
    MyHeader,
    MyPagetabs,
  },
};
</script>

<style scoped>
.header {
  background-color: #ffffff;
  border-bottom: 3px solid #f6f6f6;
}
.aside {
  overflow-y: hidden;
  overflow-x: hidden;
  height: 93.6vh;
  background-color: #2f4050;
}
.main {
  background-color: #f2f2f2;
  height: 93.6vh;
} /**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #17b3a3;
  border-radius: 3px;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #17b3a3;
  border-radius: 3px;
}
</style>